<template>
    <div class="index-container">
        <v-breadcrumb :breadcrumbData="[{name: '基础数据'}, {name: '单页文章'}]"></v-breadcrumb>

        <div class="g-box" style="min-height:600px;">
            <div class="flex-center flex-between">
                <el-button v-preventDbClick icon="el-icon-plus" type="primary" class="mb-15 width-100"
                           @click="gotoPage('/basic/single-detail')">新建
                </el-button>
                <div></div>
            </div>
            <el-table :data="list" default-expand-all :fit="true"
                      stripe border :header-cell-style="{background:'#eee'}">
                <el-table-column prop="id" label="ID" width="120"></el-table-column>
                <el-table-column label="图片" width="66">
                    <template slot-scope="scope">
                        <el-image
                            style="font-size:0;width:44px;height:44px;margin:0;padding:0;position:relative;top:3px;"
                            fit="cover"
                            :preview-src-list="[scope.row.image]"
                            :src="scope.row.image">
                            <div slot="error" style="width:44px;height:44px;border:1px solid #eee;font-size:0;"
                                 class="image-slot color-999 font12 flex-center">暂无<br/>图片
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="标题"></el-table-column>
                <el-table-column label="推荐到首页" width="120">
                    <template slot-scope="scope">
                        <el-button v-preventDbClick size="mini" v-if="scope.row.is_push_to_home==1" type="success"
                                   plain>推荐
                        </el-button>
                        <el-button v-preventDbClick size="mini" v-if="scope.row.is_push_to_home==2" type="danger" plain>
                            不推荐
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="推荐到我的" width="120">
                    <template slot-scope="scope">
                        <el-button v-preventDbClick size="mini" v-if="scope.row.is_push_to_my==1" type="success" plain>
                            推荐
                        </el-button>
                        <el-button v-preventDbClick size="mini" v-if="scope.row.is_push_to_my==2" type="danger" plain>
                            不推荐
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="sort" label="排序" width="100"></el-table-column>
                <el-table-column label="状态" width="120">
                    <template slot-scope="scope">
                        <el-button v-preventDbClick size="mini" v-if="scope.row.status==1" type="success" plain>正常
                        </el-button>
                        <el-button v-preventDbClick size="mini" v-if="scope.row.status==2" type="danger" plain>禁用
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" border width="120" label="操作">
                    <template slot-scope="scope">
                        <el-button v-preventDbClick size="mini" title="编辑"
                                   @click="gotoPage('/basic/single-detail?id='+scope.row.id)"
                                   type="primary" icon="el-icon-edit-outline" circle></el-button>
                        <el-button v-preventDbClick size="mini" title="删除"
                                   @click="del(scope.row.id)" type="warning" icon="el-icon-delete" circle></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import request from '../../common/js/request.js';
import {tool} from "../../common/js/tool.js";
import config from '../../common/js/config.js'

export default {
    data() {
        return {
            list: [],
        };
    },

    computed: {},

    mounted() {
    },

    created() {
        this.getData();
    },

    methods: {
        getData() {
            request({
                url: '/manage/single/all',
            }).then((res) => {
                this.list = res.data;
            })
        },

        uploadTitleImage(e) {
            this.addobj.image = e;
        },

        del(id) {
            this.$confirm('确定要删除吗？', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                request({
                    url: '/manage/single/del',
                    data: {id: id}
                }).then((res) => {
                    tool.message(res.msg, 'success', () => {
                        this.getData();
                    })
                })
            });
        },

        add() {
            this.editId = 0;
            this.addobj.url = '';
            this.addobj.image = '';
            this.addobj.status = 1;
            this.addobj.sort = '';
            this.addDialogIsShow = true;
        },

        edit(item) {
            this.editId = item.id;
            this.addobj.url = item.url;
            this.addobj.image = item.image;
            this.addobj.status = item.status;
            this.addobj.sort = item.sort;
            this.addDialogIsShow = true;
        },

    },

};
</script>

<style lang="less" rel="stylesheet/less" scoped>
@import url("../../common/css/variable.less");
</style>
